<script setup>
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'
import { useDetailsStore } from '../../stores/index'
import bannerView from './goods/banner.vue'
import infoView from './goods/info.vue'
import tabView from './goods/tab/tab.vue'
import detailView from './goods/detail.vue'

const route = useRoute()

let details = useDetailsStore()
onMounted(async () => {
  await details.fetchGetgoodsDetails(route.params.id)
  // console.log(details.goodsData)
})

//返回
const back = () => {
  history.back()
}
</script>

<template>
  <!-- 有goods数据就渲染 -->
  <div class="goods-details" v-if="Object.keys(details.goodsData).length > 0">
    <button @click="back" id="back"><span><</span><span>返回</span></button>
    <banner-view :gallery="details.goodsData.info.gallery" />
    <info-view :info="details.goodsData.info" />
    <tab-view
      :productList="details.goodsData.productList"
      :attribute="details.goodsData.attribute"
    />
    <detail-view :detail="details.goodsData.info.detail" />
  </div>
</template>

<style scoped>
.goods-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: rgb(235, 235, 235);
}
#back {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  padding: 10px;
  color: rgb(0, 38, 255);
  background-color: white;
  border: 0;
}
</style>
